<template>
  <div>
    <p>state2.name = {{state2.name}}</p>
    <p>state2.attr.type = {{state2.attr.type}}</p>
    <p>state2.attr.age = {{state2.attr.age}}</p>
    <button @click="changeState">changeState</button>
  </div>
</template>

<script>
import { isReadonly, readonly, reactive, shallowReadonly } from 'vue';


export default {
  name: 'App',
  setup() {
    // let state = readonly({name: 'Xmo', attr: 'human', age: 22});
    let state1 = shallowReadonly({name: 'Xmo', attr: {type: 'human', age: 22}});

    // 失败
    let state2 = reactive(state1);

    // console.log(state1);
    // console.log(isReadonly(state1));
    // function changeState() {
    //   state1.name = 'newName';
    //   state1.attr.type = 'animal';
    //   state1.attr.age = 18;
    //   console.log(state1);
    // }
    console.log(state2);
    console.log(isReadonly(state2));
    function changeState() {
      state2.name = 'newName';
      state2.attr.type = 'animal';
      state2.attr.age = 18;
      console.log(state2);
    }
    return {state2, changeState};
  }
}
</script>